import React from 'react';
import style from './style.styl';
import cx from 'classnames';
import ReviewHeader from '../review/new/tool/ReviewHeader';
import { Input,DateSelect,success,Modal } from '../../ui-components'; 
import moment from 'moment';
import {Button} from 'sq-ui';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import * as conversationActions from '../../actions/conversation.action'
import questionList from './questionList';

@connect(({ conversation }) => ({ conversation }), dispatch => ({actions: bindActionCreators({...conversationActions}, dispatch)}))
class ConversationItem extends React.Component {
  static contextTypes = {
    router: React.PropTypes.object
  }
  constructor(props) {
    super(props);
    this.displayName = 'ConversationItem';
    this.state={
      questionList: questionList,
      date: ''+Date.now(),
      user: {},
      isShowAdd: false,
    }
  }
  componentWillMount() {
    const {
      user
    } = this.props.location.state || {};
    if(user){
      this.setState({
        user: user,
      });
    }else {
      this.props.actions.getSchedule(this.props.params.itemId, (res) => {
        this.setState({
          user: (res.data|| {}).targetUserProfile,
        })
      });
    }
  }
  goBack = () => {
    const {
      pageNum = 1,
    } = this.props.location.state || {};
    this.context.router.push({
      pathname: '/conversation/initiate',
      query: {
        pageNum: pageNum,
      }
    })
  }
  handleInput = (name, value) => {
    this.setState({
      questionList: this.state.questionList.map(v => {
        if(v.name === name){
          return {
            ...v,
            value: value,
          }
        }else{
          return v;
        }
      })
    });
  }
  recordSubmit = () => {
    const {
      questionList,
      date,
    } = this.state;
    const data = {
      convrScheduleId: this.props.params.itemId,
      convrDate: date,
    };
    questionList.map(v => {
      data[v.name] = v.value;
    })
    this.props.actions.addRecord(data, () => {
      success('记录成功');
      this.goBack();
    });
  }
  handleConverAdd = () => {
    this.setState({
      isShowAdd: false,
    })
    this.recordSubmit();
  }
  handleSubmit = () => {
    const {
      questionList,
    } = this.state;
    
    if(!questionList.find(v => v.value)){
      this.setState({
        isShowAdd: true,
      })
    }else {
      this.recordSubmit();
    }
  }
  render() {
    const {
      questionList,
    } = this.state;
    return (
      <div>
        <ReviewHeader title={`记录与 ${this.state.user.fullName} 的交谈`} goBack={this.goBack}  />
        <div className={style['item-page-aside']}>推荐参考以下交谈模板进行沟通，提升沟通效果。所有项目均为选填。<br/>交谈记录仅您本人和交谈对象可见，不对任何人公开。</div>
        <div className={style['item-page']}>
          {
            questionList.map((v, i) => {
              return (
                <div key={i}>
                  <label >{v.title}</label>
                  <Input 
                    width="100%"
                    onChange={e => this.handleInput(v.name, e.target.value)} 
                    multi
                    value={v.value}
                    placeholder={v.placeholder}
                  />
                </div>
              );
            })
          }
          <div style={{marginTop: '30px'}}>
            <DateSelect
              label="交谈日期"
              labelWidth={80}
              width={'300px'}
              time={this.state.date && moment(+this.state.date).format('YYYY-MM-DD')}
              onChange={time => this.setState({ date: time })}
            />
          </div>
          <div style={{marginTop: '20px'}}>
            <Button blue label={'保存'} onClick={this.handleSubmit}/>
          </div>
        </div>
        <Modal
          active={this.state.isShowAdd}
          onRequestClose={() => {this.setState({isShowAdd: false})}}
          actions={['cancel', this.handleConverAdd ]}
          title={`您没有填写任何内容`}
        >
          <div>
           您没有填写任何内容，是否确认创建交谈记录？
          </div>
        </Modal>
      </div>
    );
  }
}

export default ConversationItem;
